<template>
  <div class="page-container care-card-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="care-card-account-box">
          <div class="care-card-account-box-title">当前可分配额度(元)</div>
          <div class="care-card-account-box-money">{{ account.effectiveAmount }}</div>
          <div class="care-card-account-box-oper">
            <wf-el-auth-button
              auth-key="WALFARE-XXKZHGL-CKHK"
              type="primary"
              @click="goto('/careCard/distribute')"
            >
              发福利
            </wf-el-auth-button>
          </div>
          <div class="care-card-account-box-info"></div>
          <div class="care-card-account-box-foot">
            <wf-el-auth-button
              auth-key="WALFARE-XXKZHGL-CKSXJL"
              type="text"
              @click="goto('/careCard/creditRecord')"
            >
              查看授信记录
            </wf-el-auth-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="care-card-account-box">
          <div class="care-card-account-box-title">累计已分配(元)</div>
          <div class="care-card-account-box-money">{{ account.useAmount }}</div>
          <div class="care-card-account-box-oper">
            <wf-el-auth-button
              auth-key="WALFARE-FLGL-FPGL"
              type="primary"
              @click="goto('/careCard/distributeList')"
            >
              分配管理
            </wf-el-auth-button>
          </div>
          <div class="care-card-account-box-info">
            <div class="care-card-account-box-info-item">
              <span class="item-name">企业回收：</span>
              <span class="item-text">￥{{ account.recycleUserAmount || 0 }}</span>
            </div>
          </div>
          <div class="care-card-account-box-foot">
            <wf-el-auth-button
              auth-key="WALFARE-FLGL-HSJL"
              type="text"
              @click="goto('/careCard/recoveryRecord')"
            >
              回收记录
            </wf-el-auth-button>
            <wf-el-auth-button
              auth-key="WALFARE-FLGL-FFJL"
              type="text"
              @click="goto('/careCard/distributeHistory')"
            >
              发放记录
            </wf-el-auth-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="care-card-account-box">
          <div class="care-card-account-box-title">当前冻结额度</div>
          <div class="care-card-account-box-money">{{ account.freezeAmount }}</div>
          <div class="care-card-account-box-oper"></div>
          <div class="care-card-account-box-info"></div>
          <div class="care-card-account-box-foot"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="care-card-account-box">
          <div class="care-card-account-box-title">
            累计欠费
            <el-tooltip
              class="item"
              effect="dark"
              content="先消费后结算回款，欠费金额是未结清的历史消费金额"
              placement="right"
            >
              <i class="fa fa-question-circle-o"></i>
            </el-tooltip>
          </div>
          <div class="care-card-account-box-money">{{ account.OwingAmount }}</div>
          <div class="care-card-account-box-oper">
            <wf-el-auth-button
              auth-key="WALFARE-XXKZHGL-CZHK"
              type="primary"
              @click="onRechargePayment"
            >
              充值回款
            </wf-el-auth-button>
          </div>
          <div class="care-card-account-box-info"></div>
          <div class="care-card-account-box-foot">
            <wf-el-auth-button
              auth-key="WALFARE-FLGL-CKCZJL"
              type="text"
              @click="goto('/careCard/paycollect')"
            >
              查看充值记录
            </wf-el-auth-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <recharge ref="recharge" @recharge-complite="rechargeComplite" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import Recharge from './drawer/Recharge';
  import { getAccountDetail } from '@/api/careCard';

  export default {
    components: {
      Recharge,
    },
    data() {
      return {
        account: {
          effectiveAmount: 0, // 可分配金额
          freezeAmount: 0, // 冻结金额
          id: 0,
          recycleAmount: 0, // 被撤回金额
          totalAmount: 0, // 总金额
          useAmount: 0, // 已分配金额
          OwingAmount: 0, // 累计欠费
          recycleUserAmount: 0, // 企业回收
        },
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
      organizationName() {
        return this.userInfo.organName;
      },
    },
    // mounted() {
    //   this.initData();
    // },
    activated() {
      this.initData();
    },
    methods: {
      async initData() {
        const { data } = await getAccountDetail();
        if (data) {
          this.account = data;
        }
      },
      onRechargePayment() {
        this.$refs['recharge'].open({
          organizationId: this.organizationId,
          organizationName: this.organizationName,
        });
      },
      rechargeComplite() {
        this.initData();
      },
      goto(path) {
        this.$router.push(path);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .care-card-container {
    margin: 20px 0;
  }
  .care-card-account-box {
    height: 300px;
    text-align: center;
    background: #ffffff;
    border-radius: 5px;
    padding: 30px;
  }
  .care-card-account-box-title {
    color: #333333;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
  }
  .care-card-account-box-money {
    color: #697bff;
    font-size: 28px;
    height: 40px;
    line-height: 40px;
  }
  .care-card-account-box-oper {
    padding: 20px 0 20px 0;
    height: 86px;
  }
  .care-card-account-box-info {
    height: 70px;
    color: #868686;
  }
  .care-card-account-box-info-item {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    > .item-name {
      text-align: left;
      display: inline-block;
      width: 50%;
      min-width: 75px;
    }
    > .item-text {
      text-align: right;
      display: inline-block;
      width: 50%;
    }
  }
  .care-card-account-box-foot {
  }
</style>
